<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2019-11-14 10:31:55
 -->
<template>
  <div>
    <el-container>
      <el-aside width="150px">
        <cate-tree @node-click="handleNodeClick" />
      </el-aside>
      <el-main>
        <div>
          <el-input
            v-model="listQuery.name"
            size="small"
            style="width: 360px"
            placeholder="搜索商品编号,条形码,名称,规格,属性"
            @keyup.enter.native="onKeyupEnter"
          >
            <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
          </el-input>
          <div class="fr">
            <el-button size="small" type="primary" @click="btnSelectSure"> 选 择 </el-button>
            <el-button size="small" type="default" @click="btnSelectSureClose"> 选择并关闭 </el-button>
          </div>
        </div>
        <div class="table-container">
          <vxe-grid
            ref="table"
            class="grid"
            border
            size="small"
            resizable
            highlight-hover-row
            :edit-config="{trigger: 'click', mode: 'row'}"
            :loading="tableLoading.goods"
            :columns="columnsData"
            :data="list"
            @cell-mouseenter="onCellMouseEnter"
          />
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            layout="total, sizes,prev, pager, next,jumper"
            size="small"
            :page-size="pageInfo.rows"
            :page-sizes="[10,20,30]"
            :current-page.sync="pageInfo.page"
            :total="pageInfo.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { fetchList } from '@/api/goods/goods.js'
import { oftenuse } from '@/libs/mixins'
import cateTree from '@/views/goods/category'
import clonedeep from 'clonedeep'

const defaultListQuery = {
}
export default {
  name: 'GoodsSelect',
  components: { cateTree },
  mixins: [oftenuse],
  props: {
    oper: {
      type: String,
      default: 'list'
    }
  },
  data() {
    return {
      operates: [
        {
          label: '转移到分类',
          value: 'transferCategory'
        },
        {
          label: '移入回收站',
          value: 'recycle'
        }
      ],
      columnsData: [
        { title: '#', type: 'index', fixed: 'left', width: 60, align: 'center' },
        { field: 'num', title: '数量', width: 160, editRender: { name: 'ElInputNumber', props: { size: 'mini', min: 0 }}},
        { field: 'name', title: '商品名称/规格', showOverflow: true, width: '280' },
        { field: 'unit', title: '单位', width: 150 },
        { field: 'purchasingPrice', title: '参考进货价(元)', align: 'right', width: 110 }
      ],
      operateType: null,
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      selectProductCateValue: null,
      multipleSelection: [],
      productCateOptions: []
    }
  },
  watch: {
    selectProductCateValue: function(newValue) {
      if (newValue != null && newValue.length === 2) {
        this.listQuery.productCategoryId = newValue[1]
      } else {
        this.listQuery.productCategoryId = null
      }
    }
  },
  created() {
    this.pageInfo.rows = 10
    this.getList()
  },
  beforeDestroy() {
  },
  methods: {
    btnSearch() {
      this.pageInfo.page = 1
      this.setBtnLoading('search', true)
      this.getList().then((res) => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    btnSelectSure() {
      this._btnSelectSure()
    },
    btnSelectSureClose() {
      this._btnSelectSure(true)
    },
    _btnSelectSure(isClose = false) {
      this.$once('hook:beforeDestroy', () => {
        this.$bus.$off('on-goods-select-sure')
      })
      const params = {
        data: this.getHasNumGoodsData(this.list),
        isClose
      }
      this.$bus.$emit('on-goods-select-sure', params)
    },
    /**
     * 获取有数量的商品数据
     */
    getHasNumGoodsData(tableData) {
      const data = tableData.filter(item => { return item.num > 0 })
      data.forEach(item => {
        delete item._XID
      })
      return clonedeep(data)
    },
    // api
    getList(params = { data: this.listQuery, pageInfo: this.pageInfo }) {
      this.setTableLoading('goods', true)
      return new Promise((resolve, reject) => {
        this.list = []
        fetchList(params).then(res => {
          if (res.data.flag) {
            this.list = this.formatResData(res.data.data.data)
            this.pageInfo = res.data.data.pageInfo
          }
          this.setTableLoading('goods', false)
          resolve(res)
        }).catch(err => {
          this.setTableLoading('goods', false)
          reject(err)
        })
      })
    },
    formatResData(data) {
      data.forEach(element => {
        element.num = 0
      })
      return data
    },
    // on
    onKeyupEnter() {
      this.btnSearch()
    },
    onCellMouseEnter(params) {
      const { row } = params
      this.$refs.table.setActiveRow(row)
    },
    handleNodeClick(data) {
      this.getList({
        data: { typeId: data.id },
        pageInfo: this.pageInfo
      })
    },
    handleSizeChange(val) {
      this.pageInfo.page = 1
      this.pageInfo.rows = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val
      this.getList()
    },
    handleSelectionChange(dataList) {
      this.multipleSelection = dataList
    },
    handleShowProduct(index, row) {
      this.jump2goodsDetail(row.id)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .aside {
    .el-tree {
      // background: #f1f1f7;
      color:#8b8ba2
    }
    // background: #f1f1f7;
    border-right: #ebeef5 solid 1px;
  }
  .fixed {
    position: fixed; top:0;
  }
</style>
